<template>
  <div class="title-card">
    <!-- <el-col :span="24">
      <span>
        <span>12.27亿元</span>
        <p>全市非税收入额</p>
      </span>
    </el-col> -->
    
    <div style="position:relative;margin:10% 0">
<img :src="cockpitData.imgUrl||'./text.png'" style="width:100%" />
<div style="position:absolute;z-indent:2;left:60%;top:50%;transform:translate(-50%,-50%)">
<el-col :span="24">
      <span >
        <span class="text-span" >{{cockpitData.num}}</span><span class="text-span-dw">{{cockpitData.dw}}</span>
        <p style="font-size:0.25rem">{{cockpitData.title}}</p>
      </span>
    </el-col> 
</div>
</div>
  </div>
</template>

<script>
export default {
  props:{
    cockpitData:{
      type:Object,
      default:function(){
        return {
        imgUrl:"./text.png",
        num:"45",
        dw:"个",
        title:"重大开工项目"
      }
      }
    }
  }
};
</script>

<style scoped>
.text-span {
  background:linear-gradient(0deg, #A3DAFE 0%, #FFFFFF 100%);
  background-clip: text;
  font-size:5rem;
  color: transparent;
}
.text-span {
  background:linear-gradient(0deg, #A3DAFE 0%, #FFFFFF 100%);
  background-clip: text;
  font-size:2.5rem;
  color: transparent;
}
</style>